<template>
  <view class="comm-pes-pet">
    <view class="tab_nav">
      <view class="navTitle" :class="{ active : isActive === 1}">
        <view class="title_tabs" @click="checkednavData(1)">
          参与人
        </view>
      </view>
      <view class="navTitle" :class="{ active : isActive === 2}">
        <view class="title_tabs" @click="checkednavData(2)">
          参与宠物
        </view>
      </view>
    </view>
    <view class="box-content">
      <template v-if="isActive === 1">
        <view class="canyu-item" v-for="person in personList" :key="person.id">
          <image src="https://img.qumoyugo.com/webimgbg/delete_small_icon_n_g.png" @click="delSelectDta(person)" class="remind-img"></image>
          <view style="flex:1">
            {{person.name}}
          </view>
          <view style="color: #999;padding: 20rpx" @click="gotoPage('/user/addPerson?pId=' + person.id)">修改</view>
        </view>
      </template>
      <template v-if="isActive === 2">
        <view class="canyu-item" v-for="pet in petManageList" :key="pet.id">
          <image src="https://img.qumoyugo.com/webimgbg/delete_small_icon_n_g.png" @click="delSelectDta(pet)" class="remind-img" v-if="!pet.isMyPet"></image>
          <view style="flex:1;line-height:70rpx">
            {{pet.name}}
            <text v-if="pet.isMyPet" class="hot">我的爱宠</text>
          </view>
          <view style="color: #999;padding: 20rpx" v-if="!pet.isMyPet" @click="gotoPage('/user/addManagePet?pId=' + pet.id)">修改</view>
        </view>
      </template>
      <view class="add-select-item" @click="gotoPage(isActive === 1 ? '/user/addPerson' : '/user/addManagePet')">
        <image style="width: 70rpx;height: 70rpx;" src="https://img.qumoyugo.com/webimgbg/picopino_icon_add_select_item.png"/>
        <text>新增{{isActive === 1 ? '参与人' : '参与宠物'}}</text>
      </view>
    </view>
    <TipPlain ref="alertPopup" type="dialog">
      <view class="popup-tip-box">
        <view style="font-weight: bold;font-size:34rpx">确定要删除吗？</view>
        <view @click="dialogConfirm" class="btn">确认删除</view>
      </view>
    </TipPlain>
  </view>
</template>

<script setup>
import { ref, getCurrentInstance } from 'vue'
import { onShow } from '@dcloudio/uni-app'
import TipPlain from '@/components/popup/plain'
const { $https } = getCurrentInstance().appContext.config.globalProperties
const isActive = ref(1)
const alertPopup = ref(null)
const currnetDelData = ref({})
const personList = ref([])
const petManageList = ref([])
onShow(() => {
  getListByEventOrderId()
  getListByPetManage()
})
const checkednavData = (type) => {
  isActive.value = type
}
const getListByEventOrderId = () => {
  $https({
    url: '/app/personnelManage/page/list',
    type: ''
  }).then(res => {
    if (res.code === 0) {
      personList.value = res.data.items
    }
  })
}
const getListByPetManage = () => {
  $https({
    url: '/app/petManage/list',
    type: ''
  }).then(res => {
    if (res.code === 0) {
      petManageList.value = res.data
    }
  })
}
const delSelectDta = (data) => {
  currnetDelData.value = data
  alertPopup.value.show()
}
const gotoPage = (url) => {
  uni.navigateTo({ url })
}
const dialogConfirm = () => {
  if (isActive.value === 1) {
    delPerson()
  } else {
    delPet()
  }
  alertPopup.value.close()
}
const delPerson = () => {
  $https({
    url: '/app/personnelManage/' + currnetDelData.value.id,
    type: '',
    method: 'delete'
  }).then(res => {
    if (res.code === 0) {
      uni.showToast({
        title: '删除成功',
        icon: 'none',
        success: () => {
          getListByEventOrderId()
        }
      })
    }
  }).catch(e => console.log(e))
}
const delPet = () => {
  $https({
    url: '/app/petManage/' + currnetDelData.value.id,
    type: '',
    method: 'delete'
  }).then(res => {
    if (res.code === 0) {
      uni.showToast({
        title: '删除成功',
        icon: 'none',
        success: () => {
          getListByPetManage()
        }
      })
    }
  }).catch(e => console.log(e))
}
</script>

<style scoped lang="scss">
@import "@/assets/styles/minx.scss";
.comm-pes-pet{
  padding: 40rpx 30rpx;
  min-height: 100vh;
  background: #FFF8F0;
  .tab_nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 40rpx;
    padding: 0 162rpx;
    .navTitle {
      height: 42rpx;
      line-height: 32rpx;
      text-align: center;
      font-size: 32rpx;
      color: #414141;
      font-weight: bold;
      position: relative;
      &.active{
        color: #000;
        &::after{
          content: "";
          position: absolute;
          height: 14rpx;
          border-radius: 100px;
          background: #F39A41;
          left: 0;
          right: 0;
          bottom: 2rpx;
        }
      }
    }
    .title_tabs {
      position: relative;
      z-index: 100;
    }
  }
  .add-select-item{
    height: 102rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #F0831E;
    font-weight: bold;
    font-size: 26rpx;
    line-height: 26rpx;
    padding: 16rpx 0;
  }
  .box-content{
    background: #FFF;
    border-radius: 20rpx;
  }
  .canyu-item{
    display: flex;
    justify-content: space-between;
    font-weight: normal;
    align-items: center;
    position: relative;
    padding: 20rpx 0;
    margin: 0 30rpx;
    font-size: 28rpx;
    &::before{
      @include border(bottom, #E1E1E1)
    }
    .remind-img {
      width: 70rpx;
      height: 70rpx;
    }
    .hot{
      padding: 6rpx 10rpx;
      border-radius: 8rpx;
      background: rgba(201, 231, 230, 0.60);
      font-size: 22rpx;
    }
  }
  .popup-tip-box {
    text-align: center;
    font-size: 30rpx;
    color: #414141;
    flex: 1;
    .btn{
      position: relative;
      width: 250rpx;
      height: 74rpx;
      margin: 80rpx auto 0 auto;
      background: #F7B064;
      color: #000;
      line-height: 72rpx;
      border-radius: 1000px;
      &::before{
        @include border(full, #414141, 1000px)
      }
    }
  }
}
</style>
